<template>
	<view class="">
		<view>
			<u-cell-group>
				<u-cell-item center  @click="showPopup=true" :value="form.carType" :arrow="true" title="车辆类型">
				</u-cell-item>
				<u-cell-item center  @click="showDate=true" :value="form.date" :arrow="true" title="注册日期">
				</u-cell-item>
				<u-cell-item center @click="showQingkuang=true" :value="form.accidentSituation" :arrow="true"
					title="事故情况">
				</u-cell-item>
			</u-cell-group>
			<view class="remark">
				<view class="">
					备注：
				</view>
				<view class="">
					一、如果购车后4天未登记的，不属于免检范围
				</view>
				<view class="">
					二、办理车检时需提供：
				</view>
				<view class="">
					1)机动车行驶证；
					2)交通事故责任强制保险、车船税证明；
					3)请处理完交通违规和交通事故。（查询结果供参考）
				</view>
			</view>
			<view  style="padding:40rpx 32rpx;">
				<view>
					<u-button type="primary" shape="circle" @click="goCalculation">开始计算</u-button>
				</view>
			</view>
		</view>
		<u-picker v-model="showPopup" mode="selector" :default-selector="[0]" :range="selectorObj" range-key="type" @confirm="confirmType"></u-picker>
		<u-picker v-model="showQingkuang" mode="selector" :default-selector="[0]" :range="selectorObj1" range-key="name" @confirm="confirmQing"></u-picker>
		<u-calendar v-model="showDate" mode="date" @change="confirmDate"></u-calendar>
		<u-popup v-model="show" mode="center" border-radius="10" :closeable="false" width="600rpx">
			<view style="padding: 24rpx 30rpx;font-size: 32rpx;">
				<view style="line-height: 50rpx;">
					您的爱车<text class="colorOr">不属于</text>6年内免检车辆。本轮检验周期内，请于<text class="colorOr">2022年06月30日前</text>至检验机构参加安全技术检验
				</view>
				<view style="margin-top: 20rpx;border-top: 1px solid #999; padding-top: 20rpx;text-align: center;">
					<text @click="show=false" class="colorOr">我知道了</text>
				</view>
			</view>
			
		</u-popup>
	</view>
</template>

<script>
	import {URL,BASEURL} from "../../config.js"
export default {
	data() {
		return {
			show:false,
			showDate:false,
			showPopup:false,
			showQingkuang:false,
			selectorObj:[
				{
					type:'营运客车',
					code:'1'
				},
				{
					type:'货车，大中型客车',
					code:'2'
				},
				{
					type:'七座以下非营运小客车',
					code:'3'
				},
				{
					type:'面包车和七座（含）以上非营运小客车',
					code:'4'
				},
				{
					type:'摩托车',
					code:'5'
				},
				{
					type:'其他机动车',
					code:'6'
				}
			],
			selectorObj1:[
				{
					name:'未发生过致人伤害事故',
					code:'1'
				},
				{
					name:'发生过致人伤害事故',
					code:'2'
				},
			],
			form:{
				carType:'请选择类型',
				date:'请选择注册日期',
				accidentSituation:'请选择事故情况',
			},
			resultOK:false,//计算结果
		};
	},
	methods:{
		// 选择注册日期
		confirmDate(data){
			this.form.date = data.result
		},
		// 车辆类型
		confirmType(data){
			this.form.carType = this.selectorObj[data[0]].type
		},
		// 车辆情况
		confirmQing(data){
			this.form.accidentSituation = this.selectorObj1[data[0]].name
		},
		// 计算
		goCalculation(){
			this.show = true
		},
	}
};
</script>
<style scoped lang="scss">
	.remark{
		background-color: #fff;
		padding: 26rpx 24rpx;
		>view{
			line-height: 50rpx;
		}
	}
	.colorOr{
		color: #C95802;
	}
	
</style>